<template>
  <div>
    <el-col>
      <el-menu router>
        <el-menu-item index="bannerManager">
          <span class="sp2">
            <el-icon>
              <PictureFilled />
            </el-icon>
          </span>
          <span>banner管理</span>
        </el-menu-item>
      </el-menu>
    </el-col>
    <!-- echarts柱状图表 -->
    <div id="main" style="width: 600px; height: 400px"></div>
    <!-- 百度地图 -->
    <baidu-map class="map2" scroll-wheel-zoom :center="{ lng: 117.2, lat: 31.79 }" :zoom="15">
      <!-- <bm-marker :position="{lng: 117.2, lat: 31.79}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
        <bm-label content="我爱大合肥" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}"/>
      </bm-marker> -->
  </baidu-map>
  </div>
</template>

<script>
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts'
export default {
  name: 'BannerManager',
  methods: {
    // // 基于准备好的dom，初始化echarts实例
    initChart () {
      const myChart = echarts.init(document.getElementById('main'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: '访问量'
        },
        tooltip: {},
        xAxis: {
          data: [
            '星期一',
            '星期二',
            '星期三',
            '星期四',
            '星期五',
            '星期六',
            '星期天'
          ]
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20, 50]
          }
        ]
      })
    },
    // 地图dom，初始化map实例
    initMap () {
      // eslint-disable-next-line no-undef
      const map = new AMap.Map('map', {
        zoom: 11, // 级别
        center: [117.38, 31.80923], // 中心点坐标
        viewMode: '3D'// 使用3D视图
      })
      this.map = map
    }
  },
  // 渲染dom
  mounted () {
    this.initChart()
    this.initMap()
  }
}
</script>

<style lang="scss" scoped>
.sp2 {
  color: #ffd04b;
}

.el-col {
  margin-bottom: 25px;
}
.bm-view {
  width: 100%;
  height: 300px;
}
.map2 {
  max-width: 800px;
  height: 600px;
}
</style>
